<template>
	<view class="container-wrap">
	<view class="container">
	  <view class="avatar"></view>
	  <view class="nickname">{{username}}</view>
	  <view class="phone">联系电话：{{tel}}</view>
	  <view class="logout-btn" @click="goLogin">退出登录</view>
	</view>
</view>
</template>

<script>
export default{
	
	data(){
		return{
			username:'xwyzsn',
			tel:'123456789',
		}
	},
	mounted(){
		let that = this;
		uni.getStorage({
			key:'info',
			success:function(res){
				that.info = JSON.parse(res.data)
				that.username = that.info.name
				that.tel = that.info.tel 
			}
		})
	},
	methods:{
		goLogin(){
			uni.removeStorage({
				key:'info',
				
			})
			// uni.removeStorage({
			// 	key:'start_time'
			// })
			// uni.removeStorage({
			// 	key:'end_time'
			// })
			uni.redirectTo({
				url:'/pages/login/login'
			})
		}
	}
	
}	
</script>

<style>
	.container {
	  display: flex;
	  align-items: center; /* 将flex容器中的子元素在垂直方向上居中 */
	  height: 100vh; /* 设置容器高度为视口高度，以便可以垂直居中元素 */
	}
	.container {
	  padding: 20px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	  margin-top: 30%;
	  
	}
	
	.avatar {
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  background-color: #f5f5f5;
	  margin-bottom: 20px;
	}
	
	.nickname {
	  font-size: 18px;
	  font-weight: bold;
	  margin-bottom: 10px;
	}
	
	.phone {
	  font-size: 14px;
	  margin-bottom: 20px;
	}
	
	.logout-btn {
	  background-color: #ff5a5f;
	  color: #fff;
	  font-size: 16px;
	  padding: 10px 20px;
	  border-radius: 20px;
	  cursor: pointer;
	}

	
</style>